import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Switch,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/MaterialIcons';

const SettingsScreen = ({ navigation }) => {
  const [notifications, setNotifications] = useState(true);
  const [biometric, setBiometric] = useState(true);
  const [darkMode, setDarkMode] = useState(true);
  const [currency, setCurrency] = useState('USD');

  const settingsSections = [
    {
      title: '账户设置',
      items: [
        { title: '个人资料', icon: 'person', screen: 'Profile', description: '管理您的个人信息' },
        { title: '安全设置', icon: 'security', screen: 'SecuritySettings', description: '密码、生物识别等' },
        { title: '身份验证', icon: 'verified-user', screen: 'IdentityVerification', description: '完成KYC验证' },
      ],
    },
    {
      title: '偏好设置',
      items: [
        { title: '通知', icon: 'notifications', toggle: true, value: notifications, onToggle: setNotifications },
        { title: '生物识别', icon: 'fingerprint', toggle: true, value: biometric, onToggle: setBiometric },
        { title: '深色模式', icon: 'brightness-6', toggle: true, value: darkMode, onToggle: setDarkMode },
        { title: '货币单位', icon: 'attach-money', description: currency, onPress: () => setCurrency(currency === 'USD' ? 'CNY' : 'USD') },
      ],
    },
    {
      title: '支持',
      items: [
        { title: '帮助中心', icon: 'help-outline', description: '常见问题与支持' },
        { title: '联系客服', icon: 'chat', description: '24/7在线支持' },
        { title: '关于我们', icon: 'info', description: '版本 1.0.0' },
      ],
    },
  ];

  const renderSettingItem = (item, index) => (
    <TouchableOpacity
      key={index}
      style={styles.settingItem}
      onPress={() => {
        if (item.screen) {
          navigation.navigate(item.screen);
        } else if (item.onPress) {
          item.onPress();
        }
      }}
      disabled={item.toggle}
    >
      <View style={styles.settingLeft}>
        <View style={styles.settingIcon}>
          <Icon name={item.icon} size={20} color="#fff" />
        </View>
        <View>
          <Text style={styles.settingTitle}>{item.title}</Text>
          {item.description && (
            <Text style={styles.settingDescription}>{item.description}</Text>
          )}
        </View>
      </View>
      {item.toggle ? (
        <Switch
          value={item.value}
          onValueChange={item.onToggle}
          trackColor={{ false: '#767577', true: '#4CAF50' }}
          thumbColor={item.value ? '#fff' : '#f4f3f4'}
        />
      ) : (
        <Icon name="chevron-right" size={20} color="#a0a0a0" />
      )}
    </TouchableOpacity>
  );

  return (
    <LinearGradient colors={['#1a1a2e', '#16213e']} style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.title}>设置</Text>
        </View>

        {/* User Profile Preview */}
        <View style={styles.profileCard}>
          <View style={styles.profileAvatar}>
            <Icon name="account-circle" size={60} color="#fff" />
          </View>
          <View style={styles.profileInfo}>
            <Text style={styles.profileName}>张三</Text>
            <Text style={styles.profileEmail}>zhangsan@example.com</Text>
            <TouchableOpacity
              style={styles.editProfileButton}
              onPress={() => navigation.navigate('Profile')}
            >
              <Text style={styles.editProfileText}>编辑资料</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* Settings Sections */}
        {settingsSections.map((section, sectionIndex) => (
          <View key={sectionIndex} style={styles.section}>
            <Text style={styles.sectionTitle}>{section.title}</Text>
            <View style={styles.sectionContent}>
              {section.items.map((item, itemIndex) => renderSettingItem(item, itemIndex))}
            </View>
          </View>
        ))}

        {/* Logout Button */}
        <TouchableOpacity style={styles.logoutButton}>
          <Icon name="logout" size={20} color="#f44336" />
          <Text style={styles.logoutText}>退出登录</Text>
        </TouchableOpacity>
      </ScrollView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
  },
  header: {
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
  },
  profileCard: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 20,
    padding: 20,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 30,
  },
  profileAvatar: {
    marginRight: 15,
  },
  profileInfo: {
    flex: 1,
  },
  profileName: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 5,
  },
  profileEmail: {
    fontSize: 14,
    color: '#a0a0a0',
    marginBottom: 10,
  },
  editProfileButton: {
    backgroundColor: '#4CAF50',
    borderRadius: 15,
    paddingVertical: 8,
    paddingHorizontal: 15,
    alignSelf: 'flex-start',
  },
  editProfileText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  section: {
    marginBottom: 30,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#a0a0a0',
    marginBottom: 15,
  },
  sectionContent: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    overflow: 'hidden',
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
  },
  settingItem:lastChild: {
    borderBottomWidth: 0,
  },
  settingLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  settingIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  settingTitle: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
  settingDescription: {
    fontSize: 14,
    color: '#a0a0a0',
    marginTop: 2,
  },
  logoutButton: {
    backgroundColor: 'rgba(244, 67, 54, 0.2)',
    borderRadius: 15,
    padding: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },
  logoutText: {
    color: '#f44336',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 10,
  },
});

export default SettingsScreen;
